<template>
  <div class="page-container">
    <div class="content-wrapper">
      <!-- 美化后的标题区域 -->
      <div class="header-section">
        <div class="header-content">
            <h1 class="page-title">共{{ totalRecords }}条面试记录</h1>
        </div>
<!--        <div class="header-divider"></div>-->
      </div>

      <div class="table-container">
        <!-- 美化后的加载状态 -->
        <div v-if="isLoading" class="loading-container">
          <div class="loading-spinner">
            <div class="spinner-ring"></div>
            <div class="spinner-inner"></div>
          </div>
          <p class="loading-text">正在加载面试记录...</p>
          <div class="loading-dots">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>

        <!-- 美化后的表格 -->
        <div class="table-wrapper" v-else>
          <table class="data-table">
            <thead>
            <tr class="table-header">
              <th class="header-cell">
                <div class="header-content">
                  <span class="header-icon">👤</span>
                  <span>名称</span>
                </div>
              </th>
              <th class="header-cell">
                <div class="header-content">
                  <span class="header-icon">📅</span>
                  <span>日期</span>
                </div>
              </th>
              <th class="header-cell">
                <div class="header-content">
                  <span class="header-icon">💼</span>
                  <span>岗位</span>
                </div>
              </th>
              <th class="header-cell">
                <div class="header-content">
                  <span class="header-icon">🏢</span>
                  <span>公司</span>
                </div>
              </th>
              <th class="header-cell">
                <div class="header-content">
                  <span class="header-icon">💬</span>
                  <span>面试类型</span>
                </div>
              </th>
              <th class="header-cell">
                <div class="header-content">
                  <span class="header-icon">🎯</span>
                  <span>得分/100</span>
                </div>
              </th>
              <th class="header-cell">
                <div class="header-content">
                  <span class="header-icon">⭐</span>
                  <span>评价</span>
                </div>
              </th>
              <th class="header-cell header-cell--actions">
                <div class="header-content">
                  <span class="header-icon">⚙️</span>
                  <span>操作</span>
                </div>
              </th>
            </tr>
            </thead>
            <tbody>
            <!-- 数据行 -->
            <tr v-for="(record, index) in interviewRecords"
                :key="record.id"
                :class="['table-row', 'table-row--data', { 'table-row--even': index % 2 === 0 }]">
              <td class="table-cell">
                <div class="cell-content">
                  <div class="user-avatar">
                    <span>{{ record.name.charAt(0) }}</span>
                  </div>
                  <span class="user-name">{{ record.name }}</span>
                </div>
              </td>
              <td class="table-cell">
                <div class="cell-content">
                  <div class="date-badge">{{ record.date }}</div>
                </div>
              </td>
              <td class="table-cell">
                <div class="cell-content">
                  <div class="position-tag">{{ record.position }}</div>
                </div>
              </td>
              <td class="table-cell">
                <div class="cell-content">
                  <div class="company-badge">{{ record.company }}</div>
                </div>
              </td>
              <td class="table-cell">
                <div class="cell-content">
                  <div class="type-badge">{{ record.interviewType }}</div>
                </div>
              </td>
              <td class="table-cell score-cell">
                <div class="cell-content">
                  <div :class="['score-badge', getScoreClass(record.score)]">
                    <span class="score-value">
                      {{ (record.score === null || record.score === 0) ? '-' : record.score }}
                    </span>
                  </div>
                </div>
              </td>
              <td class="table-cell">
                <div class="cell-content">
                  <span :class="['evaluation-badge', getEvaluationClass(record.evaluation)]">
                    <span class="evaluation-icon">{{ getEvaluationIcon(record.evaluation) }}</span>
                    <span>{{ record.evaluation }}</span>
                  </span>
                </div>
              </td>
              <td class="table-cell">
                <div class="cell-content">
                  <div class="action-buttons" v-if="record.status !== '进行中'">
                    <button @click="viewReport(record.id)" class="action-button report-button">
                      <span class="action-icon">📊</span>
                      <span class="action-text">查看报告</span>
                    </button>
                    <button @click="viewImprovementPath(record.id)" class="action-button improve-button">
                      <span class="action-icon">📈</span>
                      <span class="action-text">查看提升路线</span>
                    </button>
                    <button @click="reviewQuestions(record.id)" class="action-button review-button">
                      <span class="action-icon">🔄</span>
                      <span class="action-text">题目复现</span>
                    </button>
                  </div>
                  <!-- 美化后的进行中状态 -->
                  <div v-else class="status-container">
                    <div class="status-content">
                      <div class="status-icon-wrapper">
                        <span class="status-icon">⏰</span>
                        <div class="pulse-ring"></div>
                      </div>
                      <div class="status-text-wrapper">
                        <p class="status-title">面试进行中</p>
                        <p class="status-subtitle">请先完成面试</p>
                      </div>
                    </div>
                    <div class="progress-bar">
                      <div class="progress-fill"></div>
                    </div>
                  </div>
                </div>
              </td>
            </tr>

            <!-- 空行 -->
            <tr v-for="i in emptyLineNum"
                :key="`empty-${i}`"
                :class="['table-row', 'table-row--empty', { 'table-row--even': (interviewRecords.length + i - 1) % 2 === 0 }]">
              <td class="table-cell table-cell--empty" v-for="j in 8" :key="j">
                <div class="cell-content cell-content--empty">
                  <span class="empty-placeholder">&nbsp;</span>
                </div>
              </td>
            </tr>
            </tbody>
          </table>
        </div>

        <!-- 美化后的分页 -->
        <div class="pagination-container">
          <div class="pagination-info">
            <div class="info-badge">
              <span class="info-icon">📄</span>
              <span>第 {{ currentPage }} 页，共 {{ totalPages }} 页</span>
            </div>
          </div>

          <nav class="pagination-nav">
            <!-- 首页按钮 -->
            <button @click="goToPage(1)"
                    :disabled="currentPage === 1"
                    class="pagination-btn pagination-btn--nav pagination-btn--first">
              <span class="btn-icon">⏮️</span>
              <span class="btn-text">首页</span>
            </button>

            <!-- 上一页按钮 -->
            <button @click="goToPage(currentPage - 1)"
                    :disabled="currentPage === 1"
                    class="pagination-btn pagination-btn--nav">
              <ChevronLeft class="nav-icon"/>
            </button>

            <!-- 开始省略号 -->
            <span v-if="showStartEllipsis" class="pagination-ellipsis">
              <span class="ellipsis-dot"></span>
              <span class="ellipsis-dot"></span>
              <span class="ellipsis-dot"></span>
            </span>

            <!-- 页码按钮 -->
            <button v-for="page in visiblePages"
                    :key="page"
                    @click="goToPage(page)"
                    :class="['pagination-btn', { 'pagination-btn--active': page === currentPage }]">
              <span>{{ page }}</span>
            </button>

            <!-- 结束省略号 -->
            <span v-if="showEndEllipsis" class="pagination-ellipsis">
              <span class="ellipsis-dot"></span>
              <span class="ellipsis-dot"></span>
              <span class="ellipsis-dot"></span>
            </span>

            <!-- 下一页按钮 -->
            <button @click="goToPage(currentPage + 1)"
                    :disabled="currentPage === totalPages"
                    class="pagination-btn pagination-btn--nav">
              <ChevronRight class="nav-icon"/>
            </button>

            <!-- 末页按钮 -->
            <button @click="goToPage(totalPages)"
                    :disabled="currentPage === totalPages"
                    class="pagination-btn pagination-btn--nav pagination-btn--last">
              <span class="btn-text">末页</span>
              <span class="btn-icon">⏭️</span>
            </button>
          </nav>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, computed, onMounted} from 'vue'
import {ChevronLeft, ChevronRight} from 'lucide-vue-next'
import router from "@/router";
import {getInterviewById, getInterviewList} from "@/http/m_api/interview";
import Evaluation from "@/views/analysisReport/components/evaluation.vue";
import LoadingSpinner from "@/components/common/LoadingSpinner.vue";

const currentPage = ref(1)
const totalPages = ref()
const totalRecords = ref()
const isLoading = ref(false)
const interviewRecords = ref([])

onMounted(() => {
  getData(1)
})

const getData = (page) => {
  isLoading.value = true

  const param = {
    page: page,
    size: 4
  }
  getInterviewList(param).then(res => {
    const interviewList = res.data.list
    totalPages.value = res.data.page.pageCount
    totalRecords.value = res.data.page.count
    interviewRecords.value = []
    for (let i = 0; i < interviewList.length; i++) {
      let record = {
        id: interviewList[i].id,
        name: interviewList[i].settings.reportName,
        date: getDate(interviewList[i].createDate),
        position: interviewList[i].settings.post,
        company: interviewList[i].settings.company,
        interviewType: interviewList[i].settings.interviewType,
        status: interviewList[i].status,
        score: interviewList[i].score * 20.0,
        evaluation: generateCommentByScore(interviewList[i].score * 20.0)
      }
      interviewRecords.value.push(record)
    }
    // console.log(interviewRecords.value)
  }).catch(err => {
  })
  isLoading.value = false
}

const emptyLineNum = computed(() => {
  const recordsPerPage = 4 // 每页展示的数据条数
  const currentPageDataCount = interviewRecords.value.length // 当前页实际数据条数

  return recordsPerPage - currentPageDataCount
})
const getTimeLong = (startTime, endTime) => {
  // 将字符串时间转换为 Date 对象
  const start = new Date(startTime);
  const end = new Date(endTime);

  // 计算时间差（以毫秒为单位）
  const diff = end - start;

  // 计算时长（小时、分钟、秒）
  const hours = Math.floor(diff / (1000 * 60 * 60));
  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((diff % (1000 * 60)) / 1000);

  // console.log(`时长为：${hours} 小时 ${minutes} 分钟 ${seconds} 秒`);
  return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
}

const getDate = (time) => {
  const date = new Date(time)
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  return `${year}-${month}-${day}`
}

// 定义一个函数来根据百分制成绩生成简单评价
const generateCommentByScore = (score) => {
  // 判断成绩范围并返回对应评价
  if (score === null || score <= 0 || score > 100) {
    return "暂无成绩";
  } else if (score >= 90) {
    return "优秀";
  } else if (score >= 80) {
    return "良好";
  } else if (score >= 70) {
    return "中等";
  } else if (score >= 60) {
    return "合格";
  } else {
    return "不合格";
  }
}

// 根据评价返回对应的样式类
const getEvaluationClass = (evaluation) => {
  switch (evaluation) {
    case '优秀':
      return 'evaluation-excellent'
    case '良好':
      return 'evaluation-good'
    case '中等':
      return 'evaluation-average'
    case '合格':
      return 'evaluation-pass'
    case '不合格':
      return 'evaluation-fail'
    default:
      return 'evaluation-noData'
  }
}

// 新增：根据评价返回对应的图标
const getEvaluationIcon = (evaluation) => {
  switch (evaluation) {
    case '优秀':
      return '🏆'
    case '良好':
      return '👍'
    case '中等':
      return '👌'
    case '合格':
      return '✅'
    case '不合格':
      return '❌'
    default:
      return '❓'
  }
}

// 根据分数返回对应的样式类
const getScoreClass = (score) => {
  if (score >= 90) return 'score-excellent'
  if (score >= 80) return 'score-good'
  if (score >= 70) return 'score-average'
  if (score >= 60) return 'score-pass'
  if (score > 0) return 'score-fail'
  return 'score-noData'
}

const visiblePages = computed(() => {
  const pages = []
  const total = totalPages.value
  const current = currentPage.value

  if (total <= 5) {
    // 总页数不超过5页，显示所有页码
    for (let i = 1; i <= total; i++) {
      pages.push(i)
    }
  } else {
    // 总页数超过5页，智能显示页码
    if (current <= 3) {
      // 当前页在前3页，显示1-5
      for (let i = 1; i <= 5; i++) {
        pages.push(i)
      }
    } else if (current >= total - 2) {
      // 当前页在后3页，显示最后5页
      for (let i = total - 4; i <= total; i++) {
        pages.push(i)
      }
    } else {
      // 当前页在中间，显示当前页前后2页
      for (let i = current - 2; i <= current + 2; i++) {
        pages.push(i)
      }
    }
  }

  return pages
})

const showStartEllipsis = computed(() => {
  return totalPages.value > 5 && currentPage.value > 3
})

const showEndEllipsis = computed(() => {
  return totalPages.value > 5 && currentPage.value < totalPages.value - 2
})

const goToPage = async (page) => {
  if (page >= 1 && page <= totalPages.value) {
    await getData(page)
    currentPage.value = page
  }
}

const viewReport = (recordId) => {
  router.push({
    name: 'Report',
    params: {
      id: recordId
    }
  })
}

const viewImprovementPath = (recordId) => {
  router.push({
    name: 'Improve',
    params: {
      id: recordId
    }
  })
}

const reviewQuestions = (recordId) => {
  router.push({
    name: 'Again',
    params: {
      id: recordId
    }
  })
}
</script>

<style lang="scss" scoped>
/* CSS 变量定义 */
:root {
  --primary-color: #4f46e5;
  --primary-hover: #4338ca;
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --danger-color: #ef4444;
  --glass-bg: rgba(255, 255, 255, 0.25);
  --glass-border: rgba(255, 255, 255, 0.18);
  --shadow-soft: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  --shadow-hover: 0 15px 35px rgba(31, 38, 135, 0.2);
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --border-radius: 16px;
}

/* 页面布局 - 静态渐变背景 */
.page-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 50%, #e8f4f8 100%);
  padding: 1rem;
  position: relative;
}

.content-wrapper {
  max-width: 90rem;
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* 标题区域美化 */
.header-section {
  margin-bottom: 0.5rem;
}

.header-content {
  margin-bottom: 0.25rem;
}

.page-title {
  font-size: 2.5rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.125rem;
  position: relative;
  padding-left: 1rem;
  border-left: 4px solid #4f46e5;
}

.title-main {
  font-size: 2.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, #1e293b, #334155);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 0;
}

.title-sub {
  font-size: 1rem;
  color: #64748b;
  font-weight: 500;
  margin: 0;
}

.header-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, #cbd5e1, transparent);
  border-radius: 1px;
}

/* 加载状态美化 */
.loading-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 20rem;
  background: white;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  gap: 1.5rem;
}

.loading-spinner {
  position: relative;
  width: 4rem;
  height: 4rem;
}

.spinner-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid rgba(79, 70, 229, 0.2);
  border-top: 3px solid #4f46e5;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.spinner-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2rem;
  height: 2rem;
  border: 2px solid rgba(79, 70, 229, 0.3);
  border-bottom: 2px solid #4f46e5;
  border-radius: 50%;
  animation: spin 0.8s linear infinite reverse;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  font-size: 1.1rem;
  color: #4b5563;
  font-weight: 500;
  margin: 0;
}

.loading-dots {
  display: flex;
  gap: 0.5rem;
}

.loading-dots span {
  width: 8px;
  height: 8px;
  background: rgba(79, 70, 229, 0.7);
  border-radius: 50%;
  animation: loadingDots 1.4s ease-in-out infinite both;
}

.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes loadingDots {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 表格容器美化 */
.table-container {
  background: white;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: var(--transition-smooth);
}

.table-wrapper {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}

.table-wrapper::-webkit-scrollbar {
  height: 8px;
}

.table-wrapper::-webkit-scrollbar-track {
  background: #f1f5f9;
}

.table-wrapper::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 20px;
}

/* 表格样式美化 */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.table-header {
  background: #f8fafc;
}

.header-cell {
  padding: 1.5rem 1.25rem;
  text-align: left;
  font-size: 0.9rem;
  font-weight: 600;
  color: #334155;
  position: sticky;
  top: 0;
  background: #f8fafc;
  z-index: 10;
  transition: var(--transition-smooth);
  border-bottom: 1px solid #e2e8f0;
}

.header-cell:hover {
  background: #f1f5f9;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
}

.header-icon {
  font-size: 1.1rem;
  opacity: 0.8;
}

.header-cell--actions {
  min-width: 16rem;
}

/* 表格行美化 - 高亮而非放大 */
.table-row {
  transition: var(--transition-smooth);
  height: 4rem;
  position: relative;
}

.table-row--data:hover {
  background: #f1f5f9 !important;
}

.table-row--even {
  background: white;
}

.table-row:not(.table-row--even) {
  background: #fafafa;
}

.table-row--empty {
  opacity: 0.3;
}

.table-cell {
  padding: 1.25rem;
  font-size: 0.875rem;
  color: #1e293b;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  height: 5rem;
}

.table-cell--empty {
  border-bottom: 1px solid #f8fafc;
}

.cell-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 100%;
  min-height: 2.5rem;
}

.cell-content--empty {
  opacity: 0;
}

.empty-placeholder {
  color: transparent;
  user-select: none;
}

/* 用户头像美化 */
.user-avatar {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5, #4338ca);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 0.9rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.user-name {
  font-weight: 600;
  color: #1e293b;
}

/* 各种徽章美化 */
.date-badge {
  background: #f1f5f9;
  color: #334155;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  border: 1px solid #e2e8f0;
  font-family: 'Monaco', 'Menlo', monospace;
}

.position-tag {
  background: #dbeafe;
  color: #1e40af;
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.company-badge {
  background: #fef3c7;
  color: #92400e;
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.type-badge {
  background: #f3e8ff;
  color: #7e22ce;
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 分数徽章美化 - 使用原始颜色 */
.score-cell {
  text-align: center;
}

.score-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.9rem;
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.score-excellent {
  background: linear-gradient(135deg, #10b981, #059669);
  animation: pulse-excellent 2s infinite;
}

.score-good {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  animation: pulse-good 2s infinite;
}

.score-average {
  background: linear-gradient(135deg, #ffeb3b, #ffc107);
  animation: pulse-average 2s infinite;
}

.score-pass {
  background: linear-gradient(135deg, #f97316, #ea580c);
  animation: pulse-pass 2s infinite;
}

.score-fail {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  animation: pulse-fail 2s infinite;
}

.score-noData {
  background: linear-gradient(135deg, #e5e7eb, #9ca3af);
  animation: pulse-noData 2s infinite;
}

@keyframes pulse-excellent {
  0%, 100% {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  50% {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 8px rgba(16, 185, 129, 0);
  }
}

@keyframes pulse-good {
  0%, 100% {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(59, 130, 246, 0.7);
  }
  50% {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 8px rgba(59, 130, 246, 0);
  }
}

@keyframes pulse-average {
  0%, 100% {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(255, 235, 59, 0.7);
  }
  50% {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 8px rgba(234, 179, 8, 0);
  }
}

@keyframes pulse-pass {
  0%, 100% {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(249, 115, 22, 0.7);
  }
  50% {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 8px rgba(249, 115, 22, 0);
  }
}

@keyframes pulse-fail {
  0%, 100% {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(239, 68, 68, 0.7);
  }
  50% {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 8px rgba(239, 68, 68, 0);
  }
}

@keyframes pulse-noData {
  0%, 100% {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(229, 231, 235, 0.7);
  }
  50% {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 8px rgba(229, 231, 235, 0);
  }
}

/* 评价徽章美化 - 使用原始颜色 */
.evaluation-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  border: 1px solid transparent;
}

.evaluation-icon {
  font-size: 1rem;
}

.evaluation-excellent {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  color: #166534;
  border-color: #86efac;
}

.evaluation-good {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  color: #1e40af;
  border-color: #93c5fd;
}

.evaluation-average {
  background: linear-gradient(135deg, #fef3c7, #fde047);
  color: #a16207;
  border-color: #facc15;
}

.evaluation-pass {
  background: linear-gradient(135deg, #fed7aa, #fdba74);
  color: #c2410c;
  border-color: #fb923c;
}

.evaluation-fail {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  color: #991b1b;
  border-color: #fca5a5;
}

.evaluation-noData {
  background: linear-gradient(135deg, #f5f5f5, #e5e5e5);
  color: #6b7280;
  border-color: #d1d5db;
}

/* 操作按钮美化 */
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.action-button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  border: none;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-smooth);
  text-align: left;
  width: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.action-button:hover {
  transform: translateY(-2px);
}

.action-icon {
  font-size: 0.9rem;
  flex-shrink: 0;
}

.action-text {
  flex: 1;
}

.report-button {
  background: #ede9fe;
  color: #4338ca;
}

.report-button:hover {
  background: #ddd6fe;
}

.improve-button {
  background: #e0f2fe;
  color: #0369a1;
}

.improve-button:hover {
  background: #bae6fd;
}

.review-button {
  background: #fef3c7;
  color: #b45309;
}

.review-button:hover {
  background: #fde68a;
}

/* 进行中状态美化 */
.status-container {
  background: linear-gradient(135deg, #fef3c7 0%, #fde047 100%);
  border: 1px solid #facc15;
  border-radius: 0.75rem;
  padding: 1rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
  transition: all 0.3s ease;
}

.status-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
  z-index: 1;
}

.status-icon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-radius: 50%;
  flex-shrink: 0;
}

.status-icon {
  font-size: 1.2rem;
  animation: statusTick 1s ease-in-out infinite;
}

@keyframes statusTick {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(5deg); }
}

.pulse-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid #f59e0b;
  border-radius: 50%;
  animation: statusPulse 2s ease-out infinite;
}

@keyframes statusPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.status-text-wrapper {
  flex: 1;
}

.status-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #92400e;
  margin: 0 0 0.25rem 0;
  line-height: 1.2;
}

.status-subtitle {
  font-size: 0.75rem;
  color: #a16207;
  margin: 0;
  line-height: 1.2;
  opacity: 0.8;
}

.progress-bar {
  width: 100%;
  height: 3px;
  background-color: rgba(245, 158, 11, 0.2);
  border-radius: 9999px;
  margin-top: 0.75rem;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #d97706, #f59e0b);
  border-radius: 9999px;
  width: 60%;
  animation: statusProgress 2s ease-in-out infinite;
}

@keyframes statusProgress {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(0%); }
  100% { transform: translateX(100%); }
}

/* 分页美化 */
.pagination-container {
  background: #f8fafc;
  padding: 1.5rem;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.pagination-info {
  color: #64748b;
  font-size: 0.875rem;
}

.info-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
}

.info-icon {
  font-size: 1rem;
}

.pagination-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pagination-btn {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.2s ease;
  background: white;
  min-width: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pagination-btn--nav {
  color: #4f46e5;
}
.pagination-btn--nav:hover:not(:disabled) {
  background-color: #ede9fe;
  color: #4338ca;
  border-color: #c7d2fe;
}
.pagination-btn--nav:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: #e2e8f0;
  color: #94a3b8;
}
.pagination-btn:not(.pagination-btn--nav):not(.pagination-btn--active) {
  color: #334155;
}
.pagination-btn:not(.pagination-btn--nav):not(.pagination-btn--active):hover {
  background-color: #f8fafc;
  border-color: #cbd5e1;
}
.pagination-btn--active {
  background-color: #4f46e5;
  color: white;
  border-color: #4f46e5;
  font-weight: 600;
}
.pagination-ellipsis {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: #64748b;
}

.ellipsis-dot:nth-child(1) { animation-delay: 0s; }
.ellipsis-dot:nth-child(2) { animation-delay: 0.2s; }
.ellipsis-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes ellipsisPulse {
  0%, 60%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  30% {
    opacity: 1;
    transform: scale(1.2);
  }
}

.nav-icon {
  width: 1rem;
  height: 1rem;
}

.btn-text {
  font-size: 0.8rem;
  font-weight: 500;
}

.btn-icon {
  font-size: 0.9rem;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .page-container {
    padding: 1.5rem;
  }

  .title-main {
    font-size: 2rem;
  }
}

@media (max-width: 768px) {
  .page-container {
    padding: 1rem;
  }

  .title-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .title-main {
    font-size: 1.75rem;
  }

  .header-cell,
  .table-cell {
    padding: 0.75rem 1rem;
    font-size: 0.8rem;
  }

  .table-row {
    height: 4rem;
  }

  .table-cell {
    height: 4rem;
  }

  .user-avatar {
    width: 2rem;
    height: 2rem;
    font-size: 0.75rem;
  }

  .score-badge {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 0.75rem;
  }

  .action-buttons {
    gap: 0.25rem;
  }

  .action-button {
    padding: 0.5rem 0.6rem;
    font-size: 0.7rem;
  }

  .pagination-container {
    flex-direction: column;
    text-align: center;
  }

  .btn-text {
    display: none;
  }
}

@media (max-width: 640px) {
  .title-icon {
    width: 3rem;
    height: 3rem;
  }

  .icon-inner {
    font-size: 1.2rem;
  }

  .pagination-nav {
    gap: 0.25rem;
  }

  .pagination-btn {
    padding: 0.5rem 0.6rem;
    font-size: 0.8rem;
    min-width: 2rem;
  }
}

@media (max-width: 480px) {
  .page-container {
    padding: 0.75rem;
  }

  .table-container {
    border-radius: 12px;
  }

  .pagination-container {
    padding: 1rem;
  }

  .pagination-nav {
    flex-wrap: wrap;
    justify-content: center;
  }
}
</style>